<!DOCTYPE html>
<html lang="zh_CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/base.css" />
    <title>环境监控</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.0/dist/echarts.js"></script>
    <style>
      .center_trap {
        width: 1200px;
        min-width: 1200px;
        height: 700px;
        margin: 0 auto;
      }

      .center_trap header {
        width: 1200px;
        height: 100px;

        position: relative;
        overflow: hidden;
      }

      .center_trap header .main_page {
        float: left;
        width: 80px;
        height: 80px;
        margin-top: 10px;
        margin-left: 20px;
      }

      .center_trap header h1 {
        color: black;
        font-size: 30px;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -30px;
        margin-top: -15px;
      }

      .center_trap header .tool {
        float: right;
        margin-top: 20px;
        margin-right: 20px;
        color: black;
        font-size: 20px;
      }

      .center_trap header .tool img {
        width: 80px;
      }

      .center_trap .main {
        width: 1200px;
        height: 600px;
        overflow: hidden;
        position: relative;
      }

      .center_trap .main nav {
        float: left;
        width: 350px;
        overflow: hidden;
      }

      .center_trap .main nav ul li {
        list-style: none;
        width: 350px;
        height: 142.5px;
        background-color: rgb(221, 220, 220);
        border-radius: 20px;
        margin-bottom: 10px;
        position: relative;
      }

      .center_trap .main nav ul li img {
        width: 100px;
        height: 100px;
        margin-top: 20px;
        margin-left: 20px;
      }

      .center_trap .main nav ul li span {
        font-weight: bold;
        position: absolute;
        top: 50%;
        margin-top: -8px;
        left: 150px;
        color: black;
      }

      .center_trap .main .zhexiantu {
        width: 850px;
        height: 600px;
        position: absolute;
        top: 0;
        right: 0;
      }
    </style>
  </head>

  <body>
    <div class="center_trap">
      <header>
        <a href="index.html">
          <img src="images/首页-选中.png" class="main_page" alt="" />
        </a>
        <h1>环境监控</h1>
        <div class="tool">
          <span class="date" id="dateE">xxxx年x月x日</span>
          <img src="images/天气.png" alt="" />
          <span class="weather">30℃</span>
        </div>
      </header>
      <div class="main">
        <nav>
          <ul>
            <li>
              <img src="images/温度.png" alt="" />
              <span>温度：<em id="temE">xxx℃</em></span>
            </li>
            <li>
              <img src="images/煤气炉.png" alt="" />
              <span>煤气浓度：<em id="methaneE">xxx%</em></span>
            </li>
            <li>
              <img src="images/烟雾.png" alt="" />
              <span>烟雾浓度：<em id="smokeE">xxx%</em></span>
            </li>
            <li>
              <img src="images/湿度.png" alt="" />
              <span>湿度：<em id="humE">xxx%RH</em></span>
            </li>
          </ul>
        </nav>
        <div id="zhexiantu" class="zhexiantu"></div>
      </div>
    </div>

    <script>
      $(document).ready(function () {
        $.get("http://121.43.145.233:8888/api/?a=one", function (data, status) {
          var date = data.date;
          var tem = Number(data.tem).toFixed(2);
          var hum = Number(data.hum).toFixed(2);
          var smoke = Number(data.smoke).toFixed(2);
          var methane = Number(data.methane).toFixed(2);

          $("#dateE").text(date);
          $("#temE").text(tem + "℃");
          $("#humE").text(hum + "%RH");
          $("#smokeE").text(smoke + "%");
          $("#methaneE").text(methane + "%");
        });

        $.get("http://121.43.145.233:8888/api/?a=all", function (data, status) {
          console.log(data.ret[0]._source.hum);
          var tems = [],
            hums = [],
            smokes = [],
            methanes = [];
          for (let i = 9; i >= 0; i--) {
            tems.push(data.ret[i]._source.tem);
            hums.push(data.ret[i]._source.hum);
            smokes.push(data.ret[i]._source.smoke);
            methanes.push(data.ret[i]._source.methane);
          }
          console.log(tems + "\n" + hums + "\n" + smokes + "\n" + methanes);
          const maxY1 = 100;
          const maxY2 = 100;
          var myChart = echarts.init(document.getElementById("zhexiantu"));
          option = {
            legend: {
              // x:'left',
              // y:'top',
              data: ["温度", "湿度", "煤气浓度", "烟雾浓度"],
            },
            tooltip: {
              trigger: "axis",
            },
            xAxis: {
              type: "category",

              data: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"],
            },
            yAxis: [
              {
                name: "浓度",
                type: "value",
                min: 0,
                max: maxY1,
                interval: 5,
                position: "left",
                axisLabel: {
                  formatter: "{value}%",
                },
              },
              {
                name: "温度",
                type: "value",
                min: 0,
                max: maxY2,
                interval: 5,
                position: "right",
                axisLabel: {
                  formatter: "{value}℃",
                },
              },
            ],
            series: [
              {
                name: "温度",
                type: "line",
                data: tems,
                yAxisIndex: 1,
              },
              {
                name: "湿度",
                type: "line",
                data: hums,
                yAxisIndex: 0,
              },
              {
                name: "煤气浓度",
                type: "line",
                data: methanes,
                yAxisIndex: 0,
              },
              {
                name: "烟雾浓度",
                type: "line",
                data: smokes,
                yAxisIndex: 0,
              },
            ],
          };

          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption(option);
        });
      });
    </script>
  </body>
</html>
